<template>

    <el-card class="box-card">
        <template #header>
            <span><B>班级信息</B></span>
        </template>
        <el-form :model="searchClassesData" :label-position="left" class="demo-form-inline" size="large">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="班级名称">
                        <el-input type="text" v-model="searchClassesData.cname" placeholder="请输入班级名称" clearable />
                    </el-form-item>
                </el-col>

                <el-col :span="17" :offset="1">
                    <el-form-item>
                        <el-button type="primary" @click="findClasses">查询班级</el-button>
                        <el-button @click="clearSearchForm">重置查询</el-button>
                        <el-button type="success" @click="toEditClasses(0)">添加班级</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>

    <el-table border :data="classessData" :header-cell-style="{ borderColor: '#1478ad' }" class="tableth"
        table-layout="auto">
        <el-table-column prop="id" label="班级编号" />
        <el-table-column prop="cname" label="班级名称" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" size="small" @click="toEditClasses(scope.row.id)"> 修改 </el-button>
                <el-button type="danger" size="small" @click="delClasses(scope.row.id)"> 删除 </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-card class="box-card">
        <pagination v-model:currentPage="searchClassesData.page" v-model:pageSize="searchClassesData.pageSize"
            :total="total" @pageChange="listClasses"></pagination>
    </el-card>

    <el-dialog v-model="dialogFormVisible" :close-on-press-escape="false" :close-on-click-modal="false"
        :destroy-on-close="true" @close="clearFrom(formDataRef)" :title="editTtitle">
        <el-form :model="classes" :rules="rules" ref="classes" :label-position="right">
            <el-form-item label="班级名称" prop="cname" label-width="150px">
                <el-input v-model="classes.cname" size="large" clearable />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="editClasses">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>

import Pagination from '../../components/Pagination.vue'
import request from '../../utils/request.js';
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
    name: 'Classes',
    data() {
        return {
            dialogFormVisible: false,
            left: 'left',
            classessData: [],
            total: 0,
            searchClassesData: {
                cname: '',
                page: 1,
                pageSize: 5
            },
            classes: {
                id: 0,
                cname: ''
            },
            rules: {
                cname: [
                    { required: true, message: '请输入班级名称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
                    {validator: (rule, value, callback) => {
                            request.post("/classes/checkClassName/",this.classes).then(response => { 
                                if (response.data.code!=200) {
                                    callback(new Error('班级名称已存在'));
                                } else {
                                    callback();
                                }
                            });
                        }, trigger: 'blur'
                    }
                ]
            },

        }
    },
    mounted() {
        this.listClasses();
    },
    methods: {
        //获取班级列表数据
        listClasses() {
            // 发送POST请求获取班级列表数据
            request.post("/classes/listClasses", this.searchClassesData).then(response => {
                // 将返回的班级数据赋值给classessData变量
                this.classessData = response.data.data.records;
                // 将返回的总记录数赋值给total变量
                this.total = response.data.data.total;
            }).catch(error => {
                // 打印错误信息到控制台
                console.log(error);
                // 显示错误提示消息
                ElMessage({
                    type: 'error',
                    message: '查询失败！',
                })
            });
        },
        //查找班级数据
        findClasses() {
            this.searchClassesData.page = 1;
            this.listClasses();
        },
        //清空搜索表单
        clearSearchForm() {
            const initialData = this.$options.data.call(this);
            Object.assign(this.searchClassesData, initialData.searchClassesData);
            this.searchClassesData.page = 1;
            this.findClasses();
        },
        //删除班级
        delClasses(id) {
            ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request.delete("/classes/deleteClasses/" + id).then(response => {
                    if (response.data.status = 200) {
                        this.listClasses();
                        ElMessage({
                            type: 'success',
                            message: '删除成功！',
                        })
                    } else {
                        ElMessage({
                            type: 'error',
                            message: '删除失败！',
                        })
                    }
                }).catch(error => {
                    console.log(error);
                    ElMessage({
                        type: 'error',
                        message: '删除失败！',
                    })
                });
            })
        },
        //清空添加修改表单
        clearFrom() {
            const initialData = this.$options.data.call(this);
            Object.assign(this.classes, initialData.classes);
        },
        //去添加修改班级
        toEditClasses(flag) {
            this.dialogFormVisible = true;
            this.editTtitle = "添加班级信息";
            if (flag != 0) {
                console.log(flag);
                // 发送请求获取班级列表数据
                request.get("/classes/findClassesById/"+flag).then(response => {
                    // 将返回的班级数据赋值给classess变量
                    this.classes = response.data.data;
                }).catch(error => {
                    // 打印错误信息到控制台
                    console.log(error);
                    // 显示错误提示消息
                    ElMessage({
                        type: 'error',
                        message: '查询失败！',
                    })
                });
                this.editTtitle = "编辑班级信息";
            }
        },
        //编辑班级信息
        editClasses() {
            this.$refs.classes.validate((valid) => {
                if (valid) {
                    if(this.classes.id==0){
                        request.post("/classes/addClasses", this.classes).then(response => {
                            if (response.data.status = 200) {
                                this.listClasses();
                                this.dialogFormVisible = false;
                                ElMessage({
                                    type: 'success',
                                    message: '添加成功！',
                                })
                            } else {
                                ElMessage({
                                    type: 'error',
                                })
                            }
                        })
                    }else{
                        request.put("/classes/updateClasses", this.classes).then(response => {
                            if (response.data.status = 200) {
                                this.listClasses();
                                this.dialogFormVisible = false;
                                ElMessage({
                                    type: 'success',
                                    message: '修改成功！',
                                })
                            } else {
                                ElMessage({
                                    type: 'error',
                                })
                            }
                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    },
    components: {
        pagination: Pagination
    }
}
</script>

<style scoped>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-card {
    border: 1px solid #1c88cf;
    border-radius: 3px;
    width: 99%;
    margin-top: 5px;
}

::v-deep .el-card__header {
    background: #1c88cf;
    height: 50px;
    color: #fff;
    text-align: left;
}

.el-table {
    --el-table-border-color: #1c88cf;
    border-radius: 3px;
    width: 99%;
    margin-top: 5px;
}

.el-table ::v-deep th.el-table__cell {
    height: 46px;
    background-color: #1c88cf;
    background: #1c88cf;
    color: #fff;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>